<script lang="ts" setup>
import BigNumber from 'bignumber.js'

onMounted(async () => {
  await getActivities()
})

onActivated(async () => {
  await getActivities()
})

/* common vars */
const showPay = ref(false)
const showLoginPopup = ref(false)
const currentItem = ref<any>({})
const activityList = ref<any[]>([])
const { userInfo } = storeToRefs(useUserStore())

const userCoins = computed(() => {
  let value: any = 0
  if (userInfo.value?.coins >= 10000000000) {
    value = BigNumber(userInfo.value?.coins ?? 0)
      .div(10000)
      .div(10000)
      .decimalPlaces(1, BigNumber.ROUND_DOWN)
      .toString()
    value = `${+value}M`
  } else if (userInfo.value?.coins >= 10000000) {
    value = BigNumber(userInfo.value?.coins ?? 0)
      .div(10000)
      .div(1000)
      .decimalPlaces(1, BigNumber.ROUND_DOWN)
      .toString()
    value = `${+value}K`
  } else {
    value = BigNumber(userInfo.value?.coins ?? 0).div(10000)
  }
  return value
})

const userBonus = computed(() => {
  let value: any = 0
  value = BigNumber(userInfo.value?.bonus ?? 0).div(10000)

  return value
})

/* recharge */
async function getActivities() {
  const { Data } = await useRequest.post('/GetActivities', { page_index: 1, page_size: 20 })
  activityList.value = Data?.act ?? []
}

// 首次充值
const firstActive = computed(() => activityList.value?.find(item => item.is_first))

// activeList
const otherActives = computed(() => activityList.value?.filter(item => !item.is_first))

// 点击套餐
function handleActiveItem(item: any) {
  if (userInfo.value?.user_id) {
    currentItem.value = item
    showPay.value = true
  } else {
    showLoginPopup.value = true
  }
}
</script>

<template>
  <div class="page">
    <!-- nav-bar -->
    <NavBar
      :show-logo="false"
      :show-back="true"
      :show-title="true">
    </NavBar>

    <div class="page-container">
      <!-- user-info -->
      <div class="user-info">
        <img
          class="topicon"
          src="@/assets/images/topup_topicon.png"
          alt="" />
        <div class="user-coin-item coin-tips">1 coins=1 bonus</div>
        <div class="user-coin">
          <div class="user-coin-item">
            <div class="label">Coins</div>
            <div class="num">{{ userCoins }}</div>
          </div>
          <div class="user-coin-item">
            <div class="label">Bonus</div>
            <div class="num">{{ userBonus }}</div>
          </div>
        </div>

        <svg
          class="dot-line"
          xmlns="http://www.w3.org/2000/svg"
          width="307"
          height="2"
          viewBox="0 0 307 2"
          fill="none">
          <path
            d="M0 1H307"
            stroke="#E9D7CA"
            stroke-dasharray="4 4" />
        </svg>

        <div class="info-tips">Tip : Virtual goods do not support refunds after top up</div>
      </div>

      <!-- total-corn -->
      <div
        v-if="firstActive?.id"
        class="total-corn">
        <div class="first-recharge-tip">
          First Top Up
          {{
            BigNumber(firstActive?.bonus ?? 0)
              .div(firstActive?.coins ?? 0)
              .times(100)
              .toFixed(0)
          }}%
        </div>

        <img
          class="icon"
          src="@/assets/images/topup_coin.png"
          alt="icon" />

        <div class="total-left">
          <div>
            <span class="total-num"> {{ BigNumber(firstActive?.coins ?? 0).div(10000) }} </span>
            <span class="coins">Coins</span>
          </div>
          <span class="give">+{{ BigNumber(firstActive?.bonus ?? 0).div(10000) }} Bonus</span>
        </div>

        <div
          class="total-money"
          @click="handleActiveItem(firstActive)">
          ${{ BigNumber(firstActive?.price ?? 0).div(10000) }}
        </div>
      </div>

      <!-- recharge-list -->
      <div class="recharge-list">
        <div
          v-for="(item, index) in otherActives"
          :key="item.id"
          class="corn-item"
          :class="{ 'is-active': currentItem.id === item.id }"
          @click="handleActiveItem(item)">
          <div
            v-if="item?.bonus"
            class="give-tip">
            +{{
              BigNumber(item?.bonus ?? 0)
                .div(item?.coins ?? 0)
                .times(100)
                .toFixed(0)
            }}%
          </div>
          <div class="corn-info">
            <div class="top">
              <div class="num">{{ BigNumber(item?.coins ?? 0).div(10000) }}</div>
              <div>Coins</div>
            </div>
            <div class="give">
              <span v-if="item?.bonus">+{{ BigNumber(item?.bonus ?? 0).div(10000) }} Bonus</span>
            </div>
          </div>
          <div class="meney">
            $<span>{{ BigNumber(item?.price ?? 0).div(10000) }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- pay-popup -->
    <van-popup
      v-model:show="showPay"
      position="bottom"
      teleport="body">
      <PayPopup
        :show-pay="showPay"
        :activity-id="currentItem.id"
        @close="showPay = false">
      </PayPopup>
    </van-popup>

    <!-- login-popup -->
    <van-popup
      v-model:show="showLoginPopup"
      teleport="body">
      <LazyLoginPopup @close="showLoginPopup = false"></LazyLoginPopup>
    </van-popup>
  </div>
</template>

<style lang="scss" scoped>
.page {
  height: 100%;
  overflow-y: auto;
  padding: 50px 14px 14px;
  .page-container {
    .user-info {
      position: relative;
      height: 144px;
      border-radius: 4px;
      padding: 20px;
      background: linear-gradient(100deg, rgba(250, 92, 216, 0.61), rgba(173, 38, 223, 0.75));
      margin-bottom: 20px;
      .topicon {
        position: absolute;
        top: 0;
        right: 10px;
        width: 93px;
        height: 93px;
        opacity: 0.6;
      }
      .coin-tips {
        position: relative;
        left: -2px;
        color: #fef1e1;
        white-space: nowrap;
      }
      .user-coin {
        @include flexbox($ai: center);
        overflow: hidden;
        padding-top: 10px;

        .user-coin-item {
          margin-right: 30px;
          &:last-child {
            margin-right: 0;
          }
          &:nth-child(2) {
            margin-right: 20px;
          }

          .num {
            padding-top: 3px;
            font-size: 25px;
            font-family: Roboto;
            font-weight: 800;
          }
        }
      }
      .info-tips {
        padding-top: 11px;
        color: #fac3c3;
        font-size: 12px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
      }
    }
    .total-corn {
      position: relative;
      height: 90px;
      border-radius: 0px 4px 4px 4px;
      background: linear-gradient(
        100deg,
        rgba(181, 34, 234, 0.6) 63.46%,
        rgba(216, 216, 219, 0.6) 100.38%,
        rgba(200, 200, 203, 0.6) 100.38%
      );
      padding: 20px 20px 20px 0;
      margin-top: 44px;
      margin-bottom: 20px;
      @include flexbox($ai: center);

      .first-recharge-tip {
        position: absolute;
        top: -25px;
        left: 0;
        width: 144px;
        height: 25px;
        line-height: 23px;
        text-align: center;
        font-size: 13px;
        border-radius: 8px 10px 10px 0px;
        background: linear-gradient(91deg, #ff8e77 -2.42%, #ff33e9 53.59%);
      }
      .icon {
        width: 70px;
        height: 70px;
      }
      .total-left {
        flex: 1;
        flex-shrink: 0;
        .total-num {
          color: #fff;
          font-size: 28px;
          font-family: Roboto;
          font-weight: 800;
        }
        span {
          font-size: 13px;
          color: #e8394d;
          font-weight: 500;
          &.coins {
            color: #fff;
            padding-left: 2px;
          }
        }
      }
      .total-money {
        width: 86px;
        height: 32px;
        line-height: 32px;
        text-align: center;
        flex-shrink: 0;
        border-radius: 6px;
        background: #fde650;
      }
    }
    .recharge-list {
      @include flexbox($fw: wrap);
      .corn-item {
        @include flexbox($fd: column, $jc: space-between, $ai: center);
        position: relative;
        width: 48%;
        flex-shrink: 0;
        border-radius: 4px;
        background: #131313;
        border: 3px solid #21202f;
        border-radius: 4px;
        margin-bottom: 23px;
        margin-right: 4%;
        &:nth-child(2n) {
          margin-right: 0;
        }
        .give-tip {
          position: absolute;
          top: 0;
          right: 0;
          width: 60px;
          height: 24px;
          padding: 0 10px;
          line-height: 23px;
          text-align: center;
          font-size: 13px;
          border-radius: 0 4px 0 0;
          background: linear-gradient(90deg, #ff8187 0.1%, #ff33e9 100.69%);
        }
        .corn-info {
          @include flexbox($fd: column, $jc: center, $ai: center);
          width: 100%;
          height: 78px;
          .give {
            font-size: 12px;
            color: #e8394d;
            font-family: Roboto;
            font-weight: 500;
            height: 17px;
          }
          .top {
            @include flexbox($ai: flex-end);
            width: 100%;
            font-size: 12px;
            margin-top: 10px;
            .num {
              width: 94px;
              font-family: Roboto;
              font-size: 24px;
              font-style: normal;
              font-weight: 800;
              color: #fff;
              margin-right: 2px;
              text-align: right;
              padding-right: 2px;
            }
          }
        }
        .meney {
          width: 100%;
          height: 40px;
          line-height: 40px;
          text-align: center;
          color: #f5f5f5;
          background: #21202f;
          border-radius: 0px 0px 4px 4px;
          span {
            color: #f5f5f5;
            font-family: Roboto;
            font-size: 16px;
            font-style: normal;
            font-weight: 600;
          }
        }
        &.is-active {
          border-color: #fde650;
          .meney {
            background: #fde650;
            border-radius: 0;
          }
          .give-tip {
            border-radius: 0;
          }
        }
      }
    }
  }
}
</style>
